<template>
  <HomePannel ref="target" title="新鲜好物" subTitle="新鲜出炉 品质靠谱">
    <template #right>
      <XtxMore />
    </template>
    <!-- 练习：商品列表封装单独组件 -->
    <!-- <ul ref="pannel" class="goods-list">
      <li v-for="item in prdList" :key="item.id">
        <RouterLink to="/">
          <img :src="item.picture" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="price">&yen;{{ item.price }}</p>
        </RouterLink>
      </li>
    </ul> -->
    <HomeList :goods="prdList" />
  </HomePannel>
</template>

<script>
import HomePannel from './home-panel.vue'
import { findNew } from '@/api/home'
import { ref } from 'vue'
import HomeList from './home-list.vue'
import { useObserver } from '@/hooks'

// vue3 自定义钩子函数 （函数式编程）
const useNew = () => {
  // 商品列表
  const prdList = ref([])
  // 获取商品列表的方法
  const getPrdList = async () => {
    const { result } = await findNew()
    console.log(result)
    prdList.value = result
  }
  // onMounted(() => {
  //   getPrdList()
  // })
  return { prdList, getPrdList }
}
export default {
  components: {
    HomePannel,
    HomeList
  },
  setup () {
    const { prdList, getPrdList } = useNew()

    const { target } = useObserver(getPrdList)
    // // 商品列表
    // const prdList = ref([])
    // // 获取商品列表的方法
    // const getPrdList = async () => {
    //   const { result } = await findNew()
    //   console.log(result)
    //   prdList.value = result
    // }
    // onMounted(() => {
    //   getPrdList()
    // })
    return { prdList, target }
  }
}
</script>
